<template>
	<!-- 投票 随堂测试 统计列表 -->
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center flex_0_ibhf"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between flex-sub fd0_0_ibhf'>
				<view class='flex flex-wrap align-center fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">
					<text class='fu-iconfont2  fd0_0_c0_c0_ibhf'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='fd0_0_c1_c0_ibhf'>统计</text>
				</view>
				<view class='flex flex-wrap align-center justify-end fd0_0_c0_ibhf'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="hp"></view>
		<view class="zt">
			<view @tap.stop='checktab(1)' class="left" :class="tab==1?'se':''"> 已参与</view>
			<view  @tap.stop='checktab(2)' class="right" :class="tab==2?'se':''">未参与 </view>
		</view>
		<view class="num" v-if="tab==1"> 已参与：<text style="color: #1C5EFC;">{{list.length}}</text>人 </view>
		<view class="num" v-else> 未参与：<text style="color: #F93335;">{{list.length}}</text>人 </view>
		<view class="lists">
			<view class="items flex" :class="item.check && tab==1?'se':''" v-for="(item,index) in list" :key="index" @tap.stop="jump(item)" v-if="list.length>0 && isok">
				<view class="users flex" :class="tab==2?'maxs':''">
					<image class="checkimg" @tap.stop="checkitem(index)" v-if="tab==1 && name!='随堂测试'"
						:src='item.check ?STATIC_URL+"1671.png":STATIC_URL+"16002.png"' mode=""></image>
					<image class="imgs" :src='item.avatar?item.avatar:STATIC_URL+"LOGO.png"' mode="aspectFill"></image>
					<view class="name hid1 " :class="tab==2?'maxs':'min'"> {{item.name}} </view>
				</view>
				<view class="time" v-if="tab==1"><text v-if="name=='投票'">{{item.value}}</text> </view>
				<view class="score"  v-if="tab==1 && name=='投票'" @tap.stop="openitem(item)">
					<view class="zt" v-if="item.review_status==1"> 已评分：{{item.score}}分</view>
					<view class="pf" v-else >评分</view>
				</view>
				<view class="score"  v-if="tab==1 && name=='随堂测试'" >
					<view class="zt" v-if="item.is_graded==1"> 已评分：{{item.score}}分</view>
					<view class="pf" v-else >评分</view>
				</view>
			</view>
			<view class="imhs" v-if="list.length==0 && isok">
				<image class="" src="/static/images/none.png" mode=""></image>
				<view class="">
					暂无数据
				</view>
			</view>
		</view>
		<view class="flex benben-position-layout flex flex-wrap align-center jf_flex_2_ibhf" v-if="tab==1 && list.length >0 &&  name!='随堂测试'">
			<view class='flex flex-wrap align-center' @tap.stop="checkall">
				<image class='jf_fd2_0_c0_ibhf' mode="aspectFit"
					:src='allcheck?STATIC_URL+"1671.png":STATIC_URL+"16002.png"'></image>
				<text class='jf_fd2_0_c1_ibhf'>{{!allcheck?'全选':'取消全选'}}</text>
				<text class="checknum" v-if="checknum>0">（已选：{{checknum}} 人）</text>
			</view>
			<button class='jf_fd2_1_ibhf' @tap.stop="openall">批量评分</button>

		</view>
		<!--选择器开始 -->
		<benben-picker ref="benbenWritePickerCodepicker4" @change="sureFunc()" :visible.sync="pickerDiy1763618496046" :label.sync='checkname'
			:value.sync='checkid' :options='corelist' mode='selector' :mask-show='true' :timeout='true'
			:picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between zy_picker4_0_ibhf'>
					<text class='zy_picker4_0_c0_ibhf' @tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
					<text class='zy_picker4_0_c1_ibhf'>评分</text>
					<text class='zy_picker4_0_c2_ibhf'
						@tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确认</text>
				</view>
			</template>
		</benben-picker>
		<!--选择器结束 -->
		<view :style="{height: '190rpx'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				allcheck: false, //是否全选
				checknum: '', //选中的数量
				uuid: '', //选中的id
				"pickerDiy1763618496046": false,
				"corelist": [],
				"checkname": "",
				checkid: '',
				tab:1,
				name:'',
				aid:'',//课堂活动记录id
				isok:false,
				homeworkreleaserecord_id:'',//随堂测查看某学生答题情况需要
				homework_id:'',//随堂测查看某学生答题情况需要
			}
		},
		onLoad(option) {
			this.name=option.name
			this.aid=option.aid
			this.homeworkreleaserecord_id=option.homeworkreleaserecord_id?option.homeworkreleaserecord_id:''
			this.homework_id=option.homework_id?option.homework_id:''
			this.getscore()
			this.getlist()
			let _this=this
			// 提交随堂测试 评分
			uni.$on('tjstcs', (data) => {
				_this.getlist()
			});
		},
		onUnload() {
			uni.$off('tjstcs')
		},
		methods: {
			// 获取学生列表
			async getlist(){
				this.isok=false
				let url=''
				let obj={}
				if(this.name=='投票'){
					if(this.tab==1){
						url=global.apiUrls.post68b7eebd42ac6
						obj={
							activitieslog_id:this.aid//课堂活动记录id
						}
						console.log(1)
					}else{
						url=global.apiUrls.post6916e6554d506
						obj={
							classroomactivitieslog_id:this.aid,//课堂活动记录ID
						}
					}
				}else if(this.name=='随堂测试'){
					if(this.tab==2){
						url=global.apiUrls.post6926bdb8182e2
						obj={
							classroomactivitieslog_id:this.aid//课堂活动记录id
						}
					}else{
						url=global.apiUrls.post692903bb87598
						obj={
							activitieslog_id:this.aid//课堂活动记录id
						}
					}
				}
				console.log(2)
				console.log(obj)
				let res = await this.$api.get(url,obj);
				this.isok=true
				console.log(res.data.data)
				if(res.data.data.length>0){
					this.list=res.data.data.map(item=>{
						item.check=false
						item.name=item.user_real_name
						item.value=item.vote_option+'、'+item.vote_option_name
						return item
					})
				}else{
					this.list=[]
				}
				
			},
			checktab(index){
				this.tab=index
				this.getlist()
			},
			openitem(item) {
				this.uuid = item.aid
				this.pickerDiy1763618496046 = true
			},
			openall() {
				let aid = ''
				this.list.map(item => {
					if (item.check) {
						aid += item.aid + ','
					}
				})
				if (aid) {
					this.uuid = aid
					this.uuid=this.uuid.slice(0, -1)
					this.pickerDiy1763618496046 = true

				} else {
					this.$message.info('请选择要评分的学生')
				}
			},
			getscore() {
				const arr2 = [...Array(21).keys()].map(i => ({
					name: (i - 10).toString()
				}));
				console.log(arr2);
				this.corelist = arr2
			},
			// 全选
			checkall() {
				this.allcheck = !this.allcheck
				let num = 0
				this.list.map(item => {
					item.check = this.allcheck
					if (item.check) {
						num++
					}
				})
				this.checknum = num
			},
			// 单个选择
			checkitem(index) {
				this.list[index].check = !this.list[index].check
				this.checkzt()
			},
			checkzt() {
				let st = true
				let num = 0
				this.list.map(item => {
					if (!item.check) {
						st = false
					} else {
						num++
					}
				})
				this.allcheck = st
				this.checknum = num
			},
			jump(item){
				if(this.name=='随堂测试' && this.tab==1){
					uni.navigateTo({
						url:'/pages/activity/dtxq/dtxq?name='+item.user_real_name+'&aid='+item.aid+'&uid='+item.user_id+'&homework_id='+this.homework_id+'&homeworkreleaserecord_id='+this.homeworkreleaserecord_id
					})
				}
			},
			// 评分
			async sureFunc() {
				console.log(this.checkname)
				console.log(this.uuid)
				let res = await this.$api.post(global.apiUrls.post6916ef0d744a5, {
					aid: this.uuid,
					score: this.checkname
				});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.allcheck=false
				this.checknum=''
				this.getlist()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #ffffff;
		background-size: 100% auto;

		.hp {
			width: 100%;
			height: 24rpx;
			background-color: #F3F4F8;
		}

		.flex_0_ibhf {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.fd0_0_ibhf {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.fd0_0_c1_c0_ibhf {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}

			.fd0_0_c0_ibhf {
				width: 120rpx;

				.fd0_0_c0_c0_ibhf {
					font-size: 36rpx;
					color: #333;
				}
			}
		}
	}
	.zt{
		width: 100%;
		height: 128rpx;
		text-align: center;
		justify-content: center;
		display: flex;
		padding: 36rpx 0;
		.left,
		.right{
			width: 164rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			color: #333333;
			border-radius: 8rpx 0px 0px 8rpx;
			border: 1px solid #145EFD;
			background-color: #FFFFFF;
			border: 1rpx solid #DADADC;
		}
		.right{
			border-radius:  0px 8rpx  8rpx 0px;
		}
		.se{
			border: none;
			background: #145EFD;
			color: #ffffff;
		}
	}
	.num {
		padding: 0 24rpx;
		width: 100%;
		height: 96rpx;
		background: #FBFBFB;
		font-size: 32rpx;
		line-height: 96rpx;
		color: #333;
	}

	.lists {
		padding-bottom: 36rpx;
		background-color: #ffffff;

		.se {
			background-color: #F2F7FF;
		}

		.zt {
			margin-left: auto;
			color: #29BE9E;
		}

		.pf {
			margin-left: auto;
			color: #145EFD;
		}

		.items {
			align-items: center;
			width: 100%;
			height: 132rpx;
			padding: 26rpx 24rpx;

			.users {
				align-items: center;
				width: 350rpx;
			}

			.checkimg {

				width: 36rpx;
				height: 36rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
			}

			.imgs {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				margin: 0 32rpx 0 24rpx;
			}

			.name {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				font-style: normal;
				text-transform: none;
				
				
			}
			.maxs{
				flex: 1 !important;
			}
			.min{
				max-width: 200rpx;
			}

			.time {
				width: 140rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.score {
				margin-left: auto;
			}
		}

	}

	.jf_flex_2_ibhf {
		width: 750rpx;
		height: 190rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 1rpx #EEEEEE;
		padding: 0 24px;

		.jf_fd2_0_c0_ibhf {
			width: 36rpx;
			height: 36rpx;
			border-radius: 0rpx;
			margin: 0rpx 12rpx 0rpx 0rpx;
		}

		.jf_fd2_0_c1_ibhf {
			color: #666666;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}

		.checknum {

			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #1C5EFC;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.jf_fd2_1_ibhf {
			border-radius: 42rpx;
			width: 257rpx;
			line-height: 84rpx;
			font-size: 24rpx;
			background: linear-gradient(270deg, #145EFD 0%, #6E9CFF 100%);
			color: #fff;
			height: 84rpx;
			margin: 0rpx 0rpx 0rpx auto;
		}
	}

	.zy_picker4_0_ibhf {
		background-color: #ffffff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-bottom: 1px solid #eee;

		.zy_picker4_0_c0_ibhf {
			color: var(--benbenFontColor2);
		}

		.zy_picker4_0_c1_ibhf {
			color: var(--benbenFontColor0);
		}

		.zy_picker4_0_c2_ibhf {
			color: var(--benbenFontColor4);
		}
	}
	.imhs{
		width: 100%;
		text-align: center;
		image{
			margin-top: 120rpx;
			width: 496rpx;
			height: 296rpx;
		}
		view{
			margin-top: 20rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 35rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
</style>
